<template>
  <div class="co-autocomplete">
    <el-autocomplete
      popper-class="my-autocomplete"
      v-model="state"
      :fetch-suggestions="querySearch"
      placeholder="搜索课程或者关键词"
      id="myInput"
      :class="[islong?'islong':'nolong']"
      @focus="islong=true"
      @blur="islong=false"
      :trigger-on-focus="false"
      @keyup.enter.native="handleIconClick"
      :select-when-unmatched="true"
    >
      <i class="el-icon-search el-input__icon" slot="suffix" @click="handleIconClick"></i>
      <template slot-scope="{ item }">
        <div class="name">
          <img :src="item.img" alt class="img-left" />
          <span>{{ item.label }}</span>
          <img :src="item.image" alt class="img-right" />
        </div>
      </template>
    </el-autocomplete>
  </div>
</template>

<script>
export default {
  name: "ucAutoComplete",
  data() {
    return {
      state: "",
      islong: false
    };
  },
  created() {},
  mounted() {},
  methods: {
    querySearch() {},
    handleIconClick() {}
  }
};
</script>

<style scoped lang="scss" >
</style>
